<template>
  <div class="progress-timeline">
    <el-button type="primary" @click="handleAddProgress" style="margin-bottom: 20px">
      添加进度
    </el-button>

    <div v-if="progressList.length === 0" class="empty-progress">
      <el-empty description="暂无进度记录" />
    </div>

    <div v-else>
      <el-timeline class="custom-timeline">
        <el-timeline-item
          v-for="(progress, index) in sortedProgressList"
          :key="progress.id"
          :timestamp="formatTime(progress.event_time, false)"
          placement="top"
          :type="getTimelineItemType(progress.event_type)"
          :color="getTimelineItemColor(progress.event_type)"
        >
          <div class="timeline-content">
            <div class="timeline-header">
              <span class="event-type" :class="getEventTypeClass(progress.event_type)">
                {{ getEventTypeText(progress.event_type) }}
              </span>
              <el-button
                type="danger"
                size="small"
                @click="handleDeleteProgress(progress)"
                style="margin-left: 10px"
              >
                删除
              </el-button>
            </div>
            <div class="timeline-body">
              <div v-html="progress.content"></div>
            </div>
            <div class="timeline-footer">
              <div></div>
              <span class="operator-create-time">
                操作人：{{ progress.operator_name }} 编辑于
                {{ formatTime(progress.create_time, true) }}
              </span>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { ElMessageBox, ElMessage } from 'element-plus'
  import { getEventTypeText } from '@/constants/lawcase'
  import { useLawcaseStore } from '@/store/lawcase'
  import { formatDateTime } from '@/utils'
  import type { Progress } from '@/types/lawcase'

  const props = defineProps<{
    progressList: Progress[]
  }>()

  const emit = defineEmits(['add-progress', 'delete-progress'])

  // 按创建时间倒序排列，最新的在最上面
  const sortedProgressList = computed(() => {
    return [...props.progressList].sort((a, b) => {
      // 先尝试使用event_time进行排序
      if (a.event_time && b.event_time) {
        return new Date(b.event_time).getTime() - new Date(a.event_time).getTime()
      }
      // 如果没有event_time，则使用create_time排序
      return new Date(b.create_time).getTime() - new Date(a.create_time).getTime()
    })
  })

  // 处理添加进度
  const handleAddProgress = () => {
    emit('add-progress')
  }

  // 处理删除进度
  const handleDeleteProgress = (progress: Progress) => {
    ElMessageBox.confirm(`确定要删除这条进度记录吗？`, '确认删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async () => {
        try {
          const lawcaseStore = useLawcaseStore()
          const res = await lawcaseStore.deleteProgressAction(progress.id)
          if (res.code === 0) {
            ElMessage.success('删除成功')
            // 通知父组件刷新进度列表
            emit('delete-progress')
          } else {
            ElMessage.error(res.msg || '删除失败')
          }
        } catch (error) {
          ElMessage.error('删除失败')
        }
      })
      .catch(() => {
        // 用户取消操作
      })
  }

  // 根据事件类型获取CSS类名
  // 兼容处理字符串和数字类型
  const getEventTypeClass = (type: number | string) => {
    // 如果是字符串且不是纯数字，返回默认样式
    if (typeof type === 'string' && !/^\d+$/.test(type)) {
      return 'type-default'
    }

    // 转换为数字
    const typeNum = typeof type === 'string' ? Number(type) : type

    const typeMap: Record<number, string> = {
      1: 'type-notice', // 通知
      2: 'type-progress', // 进展
      3: 'type-court', // 庭审
      4: 'type-document', // 文书
      5: 'type-task', // 任务
      6: 'type-filing', // 立案
      7: 'type-material', // 提交材料
      8: 'type-hearing', // 开庭
      9: 'type-judgment', // 判决
      10: 'type-execution', // 执行
      11: 'type-closure', // 结案
      12: 'type-other', // 其他
    }

    return typeMap[typeNum] || 'type-default'
  }

  // 根据事件类型获取时间线节点类型
  // 兼容处理字符串和数字类型
  const getTimelineItemType = (type: number | string) => {
    // 如枟是字符串且不是纯数字，返回空字符串
    if (typeof type === 'string' && !/^\d+$/.test(type)) {
      return ''
    }

    // 转换为数字
    const typeNum = typeof type === 'string' ? Number(type) : type

    const typeMap: Record<number, string> = {
      1: 'primary', // 通知
      2: 'success', // 进展
      3: 'warning', // 庭审
      4: 'danger', // 文书
      5: '', // 任务
      6: 'primary', // 立案
      7: 'success', // 提交材料
      8: 'warning', // 开庭
      9: 'danger', // 判决
      10: 'success', // 执行
      11: 'info', // 结案
      12: '', // 其他
    }

    return typeMap[typeNum] || ''
  }

  // 根据事件类型获取时间线节点颜色
  // 兼容处理字符串和数字类型
  const getTimelineItemColor = (type: number | string) => {
    // 如果是字符串且不是纯数字，返回默认颜色
    if (typeof type === 'string' && !/^\d+$/.test(type)) {
      return '#8c8c8c'
    }

    // 转换为数字
    const typeNum = typeof type === 'string' ? Number(type) : type

    const colorMap: Record<number, string> = {
      1: '#409eff', // 通知
      2: '#67c23a', // 进展
      3: '#e6a23c', // 庭审
      4: '#f56c6c', // 文书
      5: '#909399', // 任务
      6: '#722ed1', // 立案
      7: '#13c2c2', // 提交材料
      8: '#fa8c16', // 开庭
      9: '#eb2f96', // 判决
      10: '#52c41a', // 执行
      11: '#1890ff', // 结案
      12: '#8c8c8c', // 其他
    }

    return colorMap[typeNum] || ''
  }

  // 格式化时间显示
  const formatTime = (time: string | number, showTime = true) => {
    if (!time) return ''

    let date: Date

    // 处理时间戳或日期字符串
    if (typeof time === 'number') {
      date = new Date(time * 1000)
    } else if (typeof time === 'string') {
      // 如果是纯数字字符串，当作时间戳处理
      if (/^\d+$/.test(time)) {
        date = new Date(parseInt(time) * 1000)
      } else {
        // 尝试作为日期字符串解析
        date = new Date(time)
      }
    } else {
      return ''
    }

    // 检查日期是否有效
    if (isNaN(date.getTime())) {
      return typeof time === 'string' ? time : ''
    }

    // 格式化日期
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')

    // 如果需要显示时间，则包含时分秒
    if (showTime) {
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }

    // 只显示年月日
    return `${year}-${month}-${day}`
  }
</script>

<style scoped>
  .progress-timeline {
    padding: 10px 0;
    width: 100%;
  }

  .empty-progress {
    padding: 40px 0;
    text-align: center;
  }

  /* 自定义时间线样式 */
  .custom-timeline {
    width: 100%;
    /* 确保时间线容器充分利用可用空间 */
    margin-right: 0;
  }

  /* 时间线内容部分 */
  .timeline-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* 确保内容区域能够充分利用可用空间 */
    flex: 1;
    /* 添加最小宽度以确保在窄屏幕上也能正确显示 */
    min-width: 0;
    /* 使用100%宽度确保扩展到容器边缘 */
    width: 100%;
    /* 添加内边距以提供更好的视觉效果 */
    padding-right: 10px;
    box-sizing: border-box;
  }

  .timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
    /* 确保头部内容不会溢出 */
    min-width: 0;
  }

  .event-type {
    font-weight: 600;
    /* 防止事件类型文本过长导致布局问题 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .timeline-body {
    background-color: #f8f9fa;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 8px;
    line-height: 1.6;
    color: #303133;
    /* 优化文本显示 */
    white-space: pre-wrap;
    word-break: break-word;
    /* 确保内容区域能够扩展到容器边缘 */
    width: 100%;
    flex: 1;
    /* 添加最小高度以确保空内容时也有显示区域 */
    min-height: 20px;
    /* 盒模型优化 */
    box-sizing: border-box;
    /* 添加右侧内边距以确保文本不会紧贴边缘 */
    padding-right: 10px;
  }

  .timeline-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #909399;
    font-size: 12px;
    /* 确保底部内容不会溢出 */
    min-width: 0;
  }

  .operator-create-time {
    text-align: right;
    white-space: nowrap;
  }

  /* 事件类型样式 */
  .type-notice {
    color: #409eff;
  }

  .type-progress {
    color: #67c23a;
  }

  .type-court {
    color: #e6a23c;
  }

  .type-document {
    color: #f56c6c;
  }

  .type-task {
    color: #909399;
  }

  .type-filing {
    color: #722ed1;
  }

  .type-material {
    color: #13c2c2;
  }

  .type-hearing {
    color: #fa8c16;
  }

  .type-judgment {
    color: #eb2f96;
  }

  .type-execution {
    color: #52c41a;
  }

  .type-closure {
    color: #1890ff;
  }

  .type-other {
    color: #8c8c8c;
  }

  /* 响应式布局 */
  @media (max-width: 768px) {
    .timeline-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }

    .timeline-footer {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }

    /* 在小屏幕上确保内容区域充分利用空间 */
    .timeline-content {
      width: 100%;
      padding-right: 0;
    }

    .timeline-body {
      width: 100%;
      padding-right: 0;
    }
  }
</style>
